<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="../chaos/image/icon.png" type="image/x-icon"/>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="./css/common.css">
    <title>像素战争-注册</title>
</head>
<body>
<script src="js/jquery.min.js"></script>
<script src="./layui/layui.js"></script>
<script src="js/auth.js"></script>
<ul class="layui-nav layui-bg-green chaos-nav">
    <li class="layui-nav-item">
        <a href="./login.html">登录</a>
    </li>
</ul>

<div class="layui-row layui-col-space30">
    <div class="layui-panel authForm">
        <form class="layui-form" name="registerForm">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <h2>注册</h2>
                </label>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="email" required lay-verify="required" placeholder="请输入准备注册的邮箱"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-inline">
                    <input type="text" name="registerCode" required lay-verify="required" placeholder="请输入验证码"
                           autocomplete="off"
                           class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux" onclick="sendRegisterCode()" id="sendRegisterCode">
                    发送验证码
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">昵称</label>
                <div class="layui-input-block">
                    <input type="text" name="nickName" required lay-verify="required" placeholder="请输入昵称"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" required lay-verify="required|length6" placeholder="请输入密码"
                           autocomplete="off"
                           class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">密码不小于6位</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-inline">
                    <input type="password" lay-verify="required|confirmPass" placeholder="请再次输入密码"
                           autocomplete="off"
                           class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">要与上面的密码相同</div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-fluid layui-btn-warm" lay-submit lay-filter="userRegister">
                        立即注册
                    </button>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <div class="layui-form-mid layui-word-aux" onclick="javascript:window.location.href='login.html'">
                        已有账号，直接登录
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>


<script type="text/javascript">
    let form = layui.form;
    form.on("submit(userRegister)", function (data) {
        userRegister();
        return false;
    });
    form.verify({
        length6: function (value) {
            if (value.length < 6) {
                return "密码长度不能小于6";
            }
        },
        confirmPass: function (value) {
            if ($('input[name=password]').val() !== value) {
                return "两次输入密码不一致";
            }
        }
    });
</script>
</body>
</html>